<template>
	<view class="page">
		<!-- 导航区域 -->
		<u-navbar :autoBack="true" leftText="返回" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="top">
			<!-- logo占位 -->
			<image class="logo" src="../../static/images/logo.png" mode=""></image>
		</view>
		<view class="main" :style="activeType == 'login' ? 'overflow:hidden' : 'overflow:auto'">
			<view class="title-button">
				<text @click="changetype('login')" :class="activeType == 'login' ? 'active' : 'button-item'">登录</text>
				<text @click="changetype('register')" :class="activeType == 'register' ? 'active' : 'button-item'">注册</text>
			</view>

			<!-- 组件 -->
			<login v-if="activeType == 'login'"></login>
			<register v-if="activeType == 'register'"></register>
			<!-- <component :is="activeType"></component> -->
		</view>
	</view>
</template>

<script>
import login from '@/components/login/login.vue';
import register from '@/components/register/register.vue';
export default {
	components: {
		login,
		register
	},
	data() {
		return {
			activeType: 'login'
		};
	},
	onLoad(e) {
		console.log(e);
		this.activeType = e.type;
	},
	methods: {
		changetype(type) {
			this.activeType = type;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	.top {
		width: 750rpx;
		height: 902rpx;
		background: linear-gradient(93deg, #dddce4 0%, #ccc9d1 100%);
		.logo {
			position: absolute;
			left: 50%;
			top: 130rpx;
			transform: translateX(-50%);
			width: 270rpx;
			height: 50rpx;
		}
	}
	.main {
		width: 750rpx;
		height: 1370rpx;
		background: #ffffff;
		border-radius: 64rpx 64rpx 0rpx 0rpx;
		// border: 1px solid;
		position: fixed;
		top: 214rpx;
		overflow: auto;
		.title-button {
			display: flex;
			align-items: center;
			margin: 66rpx auto 0;
			width: 622rpx;
			height: 80rpx;
			background: #f0f0f0;
			border-radius: 24rpx;

			text {
				width: 50%;
				display: block;
				background: #f0f0f0;
				text-align: center;
			}
			.active {
				transition: 0.3s;
				background-color: #fff;
				border: 1px solid $uni-theme-color;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
			}
		}
	}
}
</style>
